<template>
  <div id="role">


    <a-layout-header>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_search.png" alt="">
          <span>筛选</span>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="服务名称搜索" v-model="pagination.blurry" @keyup.enter="tosList"></a-input>
        </a-form-item>
        <a-form-item class="fright">
          <a-button icon="search" class="search_btn" @click="tosList">搜索</a-button>
        </a-form-item>
        <a-form-item class="fright">
          <a-button icon="sync" class="search_btn" @click="resetQuery">重置</a-button>
        </a-form-item>
      </a-form>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_list.png" alt="">
          <span>服务模板列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <a-button type="primary" icon="plus" @click="addClick">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>

    <a-layout-content>
      <a-table
          :columns="columns"
          :dataSource="dataTable"
          :rowKey="record => record.id"
          :loading="loading"
          :pagination="false"
          bordered>

        <span slot="modelDetails" slot-scope="modelDetails">
            <a-tag
                v-for="spe in modelDetails"
                :key="spe.serverTitle"
                :color="'green'"
            >
            {{ spe.serverTitle }}
          </a-tag>
        </span>

        <template slot="action" slot-scope="text, record">
          <a-tag color="#933dfe" @click="editClick(record.id)">编辑</a-tag>
          <a-tag color="#f50" @click="delClick(record)">删除</a-tag>
        </template>
      </a-table>
    </a-layout-content>

    <a-layout-footer>
      <a-pagination
          :pageSizeOptions="pageSizeOptions"
          :total="totalPage"
          :showTotal="total=>`总共${total}条`"
          :current="pagination.pageNumber"
          showSizeChanger
          showQuickJumper
          @change="paginationChange"
          @showSizeChange="onShowSizeChange"
      ></a-pagination>
    </a-layout-footer>


    <a-modal
        class="modalWrap"
        @ok="oKAction"
        @cancel="handleCancel"
        :title="title + '服务模板'"
        :width="880"
        :visible="visible"
        :wrapStyle="{overflow: 'auto',paddingBottom: '108px'}"
    >
      <a-form :form="form">
        <a-form-item label="模板名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
              v-decorator="['serverName', { rules: [{required:true, message: '请输入模板名称'}] }]"
          ></a-input>
        </a-form-item>

        <a-form-item label="服务条款" :label-col="{ span: 5 }" :wrapper-col="{ span: 20 }">
          <a-checkbox-group v-decorator="['serverModelDetailDto', { rules: [{required:true, message: '请选择服务条款'}] }]">
            <a-row v-for="val in options" :key="val.id">
              <a-col :span="24" :offset="8">
                <a-checkbox :value="val.title">
                  <b>{{ val.title }}</b><br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; ">{{ val.content }}</span>
                  <br />
                </a-checkbox>
              </a-col>
            </a-row>

          </a-checkbox-group>
        </a-form-item>

      </a-form>
    </a-modal>

  </div>
</template>

<script>
import * as API from "../../api/tosTemplate";
import {getTosAll} from "../../api/tos";
import {preventMoreClick} from "@/utils/filter";

export default {
  name: "roles",
  data() {
    return {
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        blurry: undefined
      },
      options: [],
      pageSizeOptions: ["10", "20", "50"],
      totalPage: undefined,
      form: this.$form.createForm(this),
      visible: false,
      title: undefined,
      loading: false,
      id: undefined, // 抽屉id
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "id"}
        },
        {
          title: "模板名称",
          dataIndex: "serverName",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "title"}
        },
        {
          title: "条款内容",
          dataIndex: "modelDetails",
          width: "9%",
          align: "center",
          scopedSlots: {customRender: "modelDetails"}
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "15%",
          align: "center",
          scopedSlots: {customRender: "action"}
        }
      ],
      dataTable: [],
      serverMode: [],
    };
  },

  mounted() {
    this.tosList();
  },

  methods: {

    resetQuery() {
      this.pagination = {
        pageNumber: 1,
        pageSize: 10,
        blurry: undefined
      }
      this.tosList();
    },

    getTosSelect() {
      getTosAll().then(response => {
        this.options = response.data;
      });
    },

    tosList() {
      this.loading = true;
      API.getTosTemplateList(this.pagination).then(res => {
        if (res.code === 200) {
          this.dataTable = res.data.records;
          this.totalPage = res.data.total
        }
        this.loading = false;
      });
    },

    addClick() {
      // 重置表单
      this.form.resetFields();
      // 查询条款列表
      this.getTosSelect();
      this.title = "新增";
      this.id = null;
      this.visible = true;
    },

    editClick(id) {
      // 重置表单
      this.form.resetFields();
      this.getTosSelect();
      this.title = "编辑"
      this.id = id;
      this.visible = true;
      this.loading = true
      API.getInfo(id).then(res => {
        if (res.code === 200) {
          let resp = res.data
          let defaultChecked = [];
          for (let i = 0; i < resp.modelDetails.length; i++) {
            defaultChecked.push(resp.modelDetails[i].serverTitle);
          }
          this.form.setFieldsValue({
            serverName: resp.serverName,
            serverModelDetailDto: defaultChecked,
          });
        }
      })
      this.loading = false
    },

    delClick(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        content: "确定删除该模板？",
        onOk() {
          let arr = [record.id]
          API.del(arr).then(res => {
            if (res.code === 200) {
              that.$message.success("删除成功");
              that.tosList();
            }
          });
        }
      });
    },

    oKAction() {
      this.form.validateFields((err, formValue) => {
        if (!err) {
          // 防重复点击
          preventMoreClick(this, () => {
            let serverModel = formValue.serverModelDetailDto;
            this.serverMode = [];
            for (let i = 0; i < serverModel.length; i++) {
              let index = this.options.findIndex(value => value.title === serverModel[i]);
              let val = this.options[index];
              this.serverMode.push({serverTitle: val.title, serverInfo: val.content});
            }
            formValue.serverModelDetailDto = this.serverMode;
            if (this.id) {
              // 修改
              API.edit(this.id, formValue).then(res => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.tosList();
                  this.visible = false
                  this.id = null
                }
              })
            } else {
              API.add(formValue).then(res => {
                if (res.code === 200) {
                  this.$message.success("服务模板成功");
                  this.tosList();
                  this.visible = false
                }
              })
            }
          })
        }
      });
    },

    handleCancel() {
      this.visible = false;
      this.id = undefined;
    },

    paginationChange(value) {
      this.pagination.pageNumber = value;
      this.tosList();
    },

    onShowSizeChange(value, pageSize) {
      this.pagination.pageNumber = 1;
      this.pagination.pageSize = pageSize;
      this.tosList();
    },
  }
};
</script>

